<template>
	   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <view class="kugou-page">
	<!-- 导航栏 -->	
    <view class="header">

      <view class="nav-tabs">
        <view class="tab-item active">推荐</view>
        <view class="tab-item">乐库</view>
        <view class="tab-item">听书</view>
        <view class="tab-item">儿童</view>
        <view class="tab-item">AI唱</view>
        <view class="tab-item">AI写歌</view>
      </view>
      <view class="search-btn">
		<image src="/static/10025.png" mode="" style="width:25px;height:25px;"></image>
      </view>
    </view>
	<!-- 搜索区 -->
    <view class="vip-banner">
			<uv-search placeholder="重生之我在异乡为异客 一键..." shape="square" actionText="" style="margin-left:50px;"></uv-search>
			<view>
				<image src="/static/voice.png" mode="" style="width:23px;height:23px;"></image>
				<image src="/static/红包.png" mode="" style="width:23px;height:23px;"></image>
			</view>
    </view>
	<!-- 歌曲列表 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门歌单</text>
        <text class="more-btn">更多</text>
      </view>
      <view class="hot-playlist-grid">
        <view class="hot-playlist-item" v-for="(item, index) in hotPlaylistsNew" :key="index">
          <image :src="item.cover" mode="widthFix"></image>
          <text class="hot-playlist-name">{{ item.name }}</text>
          <text class="hot-playlist-count">{{ item.count }}</text>
        </view>
      </view>
    </view>
	<!-- 歌曲列表 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">2347410736的专属好歌</text>
        <text class="more-btn">更多</text>
      </view>
      <view class="rank-list">
        <swiper :indicator-dots="false"  :interval="3000" :duration="1000" style="height:382px;">
        	<swiper-item>
        		<view class="rank-item" v-for="(rank, index) in rankLists" :key="index">
        		  <image :src="rank.cover" mode="widthFix"></image>
        		  <view class="rank-info">
        		    <text class="rank-name">{{ rank.name }}</text>
        		    <view class="rank-songs">
        		      <text class="rank-song" v-for="(song, songIndex) in rank.songs" :key="songIndex">{{ song }}</text>
        		    </view>
        		  </view>
        		</view>
        	</swiper-item>
			<swiper-item>
				<view class="rank-item" v-for="(rank, index) in rankLists" :key="index">
				  <image :src="rank.cover" mode="widthFix"></image>
				  <view class="rank-info">
				    <text class="rank-name">{{ rank.name }}</text>
				    <view class="rank-songs">
				      <text class="rank-song" v-for="(song, songIndex) in rank.songs" :key="songIndex">{{ song }}</text>
				    </view>
				  </view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="rank-item" v-for="(rank, index) in rankLists" :key="index">
				  <image :src="rank.cover" mode="widthFix"></image>
				  <view class="rank-info">
				    <text class="rank-name">{{ rank.name }}</text>
				    <view class="rank-songs">
				      <text class="rank-song" v-for="(song, songIndex) in rank.songs" :key="songIndex">{{ song }}</text>
				    </view>
				  </view>
				</view>
			</swiper-item>
        </swiper>
      </view>
    </view>
	<!-- 歌曲列表 -->
	<view class="section">
       <view class="section-header">
         <text class="section-title">有声小说</text>
         <text class="more-btn">更多</text>
       </view>
       <view class="novel-grid">
         <view class="novel-item" v-for="(novel, index) in audioNovels" :key="index">
           <image :src="novel.cover" mode="widthFix"></image>
           <text class="novel-tag" v-if="novel.tag">{{ novel.tag }}</text>
           <text class="novel-name">{{ novel.name }}</text>
           <text class="novel-count">{{ novel.count }}</text>
         </view>
       </view>
     </view>
  </view>
	<!-- 音乐播放器 -->
    <div class="player-bar">
        <div class="current-song">
            <div class="current-thumb">
				<image src="/static/3.jpg" style="width: 100%;height: 40px;border-radius: 50px;"></image>
			</div>
            <div class="song-details">
                <h4>重生之我在异乡为异客</h4>
                <p>流浪诗人</p>
            </div>
        </div>
        <div class="player-controls">
            <i class="fas fa-step-backward"></i>
            <div class="play-button">
                <i class="fas fa-play"></i>
            </div>
            <i class="fas fa-step-forward"></i>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const hotPlaylistsNew = ref([
  {
    cover: '/static/10007.jpg',
    name: '[风靡全网] 2025年度精选热歌',
    count: '5.6亿'
  },
  {
    cover: '/static/10008.jpg',
    name: '100首经典老歌 | 追忆青春，致8090',
    count: '4.3亿'
  },
  {
    cover: '/static/10011.jpg',
    name: '8090经典霸：你的专属回忆',
    count: '4.2亿'
  },
  {
    cover:'/static/10009.jpg',
    name: '车载DJ：油加满，一路向北',
    count: '3.6亿'
  },
  {
    cover: '/static/10012.jpg',
    name: '抖腿热歌：流行一网打尽',
    count: '3.1亿'
  },
  {
    cover:'/static/10010.jpg',
    name: '华语热歌：流行节奏，一键GET',
    count: '2.6亿'
  }
]);

const rankLists = ref([
  {
    cover:'/static/10013.jpg',
    name: 'TOP500',
    songs: ['想你一次痛一秒 - 大路', '来生别再相遇 - 烟嗓船长', '离开我的依赖 - 王艳薇']
  },
  {
    cover: '/static/10014.jpg',
    name: '国潮音乐榜',
    songs: ['借霜雪 - 二饼胡拉、刀哥拉二胡', '昨夜风今宵月 - 陈卓璇', '听夜雨 - 董铃']
  },
  {
    cover: '/static/10015.jpg',
    name: '电音榜',
    songs: ['Once Upon A Time (House Extended ...', 'PASSO BEM SOLTO (Ultra Slowed) - Ad...']
  }
]);

const hotSingers = ref([
  {
    avatar: '/static/10016.jpg',
    name: '海来阿木'
  },
  {
    avatar: '/static/10017.jpg',
    name: '孙燕姿'
  },
  {
    avatar: '/static/10018.jpg',
    name: '刘宇宁'
  }
]);

const audioNovels = ref([
  {
    cover:  '/static/10019.jpg',
    name: '剑来广播剧第六季 | 绕尧绕天倾',
    count: '43.2万'
  },
  {
    cover: '/static/10020.jpg',
    name: '龙族动画原著|江南代表作|紫禁...',
    count: '26.3万'
  },
  {
    cover:  '/static/10021.png',
    name: '都市超级医圣|全新重制|入山自分隔...',
    count: '57.1万'
  },
  {
    cover:  '/static/10022.png',
    name: '第一兵王|复仇热血|扮猪吃虎|权谋...',
    count: '28.5万'
  },
  {
    cover:  '/static/10023.png',
    name: '北派盗墓笔记 | 全网最精版本 | 多...',
    count: '12.6万'
  },
  {
    cover:  '/static/10024.png',
    name: '财戒 | 全网独家多播剧 | 曲中人工...',
    count: '18.7万'
  }
]);
onMounted(() => {
  const designWidth = 375;
  const remBase = 37.5;
  const setRootFontSize = () => {
    let screenWidth;
    if (typeof window !== 'undefined') {
      screenWidth = window.innerWidth || document.documentElement.clientWidth;
    } else {
      const sysInfo = uni.getSystemInfoSync();
      screenWidth = sysInfo.screenWidth;
    }
    const rootFontSize = (screenWidth / designWidth) * remBase;
    if (typeof document !== 'undefined') {
      document.documentElement.style.fontSize = `${rootFontSize}px`;
    }
  };
  setRootFontSize();
  if (typeof window !== 'undefined') {
    window.addEventListener('resize', setRootFontSize);
  }
});
</script>
<script>
	    // 简单的交互效果
	         document.addEventListener('DOMContentLoaded', function() {
	             const playButton = document.querySelector('.play-button');
	             const currentThumb = document.querySelector('.current-thumb');
	             
	             playButton.addEventListener('click', function() {
	                 const icon = playButton.querySelector('i');
	                 if (icon.classList.contains('fa-play')) {
	                     icon.classList.remove('fa-play');
	                     icon.classList.add('fa-pause');
	                     currentThumb.style.animationPlayState = 'running';
	                 } else {
	                     icon.classList.remove('fa-play');
	                     icon.classList.add('fa-pause');
	                     currentThumb.style.animationPlayState = 'paused';
	                 }
	             })
	             // 歌曲卡片点击效果
	             const songCards = document.querySelectorAll('.song-card');
	             songCards.forEach(card => {
	                 card.addEventListener('click', function() {
	                     // 在实际应用中，这里会加载并播放歌曲
	                     const songName = this.querySelector('h4').textContent;
	                     const artist = this.querySelector('p').textContent;
	                     
	                     document.querySelector('.song-details h4').textContent = songName;
	                     document.querySelector('.song-details p').textContent = artist;
	                     
	                     playButton.querySelector('i').classList.remove('fa-play');
	                     playButton.querySelector('i').classList.add('fa-pause');
	                     currentThumb.style.animationPlayState = 'running';
	                 });
	             });
	         });
</script>
<style>
.kugou-page {
  background-color: #fff;
  min-height: 100vh;

}
.header {
  display: flex;
  align-items: center;
  padding: 0.2667rem 0.4rem;
}

.nav-tabs {
  flex: 1;
  display: flex;
  margin: 0 0.4rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.nav-tabs view{
	display: flex;
}
.nav-tabs::-webkit-scrollbar {
  display: none;
}
.tab-item {
  margin-right: 0.5333rem;
  font-size:16px;
  color: #333;
  padding: 0.1333rem 0;
}
.tab-item.active {
  color: black;
  font-weight: bold;
  font-size:16px;
  border-bottom: 0.0533rem solid skyblue;
}
.vip-banner {
 display:flex;
 justify-content:space-around;
 align-items:center;
 justify-content: center;
}
.vip-icon {
  width: 0.8rem;
  height: 0.8rem;
  background-color: #fff;
  color: #ff3a3a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  font-weight: bold;
  margin-right: 0.2667rem;
}
.vip-text {
  color: #fff;
}
.vip-title {
  font-size: 0.4267rem;
  font-weight: bold;
  margin-bottom: 0.1333rem;
  display: block;
}
.vip-desc {
  font-size: 0.32rem;
  opacity: 0.9;
}
.section {
  margin: 0.2667rem;
  background-color: #fff;
  border-radius: 0.2133rem;
  padding: 0.4rem;
  height: 370px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.section-title {
  font-size: 0.48rem;
  font-weight: bold;
  color: #333;
}
.more-btn {
  font-size: 0.32rem;
  color: #999;
}
.song-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2667rem;
  height:370px;
}
.song-item {
  width: calc(33.33% - 0.1778rem);
  display: flex;
  flex-direction: column;
}
.song-item image {
  width: 100%;
  height: 3.2rem;
  border-radius: 0.16rem;
  margin-bottom: 0.1333rem;
  object-fit: cover;
}
.song-name {
  font-size: 0.3733rem;
  color: #333;
  line-height: 1.4;
  margin-bottom: 0.08rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.singer {
  font-size: 0.32rem;
  color: #999;
}
.hot-playlist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2667rem;
}
.hot-playlist-item {
  width: calc(33.33% - 0.1778rem);
}
.hot-playlist-item image {
  width: 100%;
  height: 3.2rem;
  border-radius: 0.16rem;
  margin-bottom: 0.1333rem;
  object-fit: cover;
}
.hot-playlist-name {
  font-size: 0.3733rem;
  color: #333;
  line-height: 1.4;
  margin-bottom: 0.08rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.hot-playlist-count {
  font-size: 0.32rem;
  color: #999;
}
.rank-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rank-item {
  display: flex;
  align-items: flex-start;
  gap: 0.2667rem;
  height: 119px;
}
.rank-item image {
  width: 2.1333rem;
  height: 2.1333rem;
  border-radius: 0.16rem;
  object-fit: cover;
}
.rank-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rank-name {
  font-size: 0.4267rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.1333rem;
}
.rank-songs {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.rank-song {
  font-size: 0.3733rem;
  color: #333;
  line-height: 1.4;
}
.singer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5333rem;
}
.singer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(33.33% - 0.3556rem);
}
.singer-item image {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.1333rem;
}
.singer-name {
  font-size: 0.3733rem;
  color: #333;
  }
  .section {
    margin: 0.2667rem; /* 10px */
    background-color: #fff;
    border-radius: 0.2133rem; /* 8px */
    padding: 0.4rem; /* 15px */
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem; /* 15px */
  }
  
  .section-title {
    font-size: 0.48rem; /* 18px */
    font-weight: bold;
    color: #333;
  }
  
  .more-btn {
    font-size: 0.32rem; /* 12px */
    color: #999;
  }
  
  .novel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2667rem; /* 10px */
  }
  
  .novel-item {
    width: calc(33.33% - 0.1778rem); /* 三列布局，减去间隙 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .novel-item image {
    width: 100%;
    height: 3.2rem; /* 120px */
    border-radius: 0.16rem; /* 6px */
    margin-bottom: 0.1333rem; /* 5px */
    object-fit: cover;
  }
  
  .novel-tag {
    position: absolute;
    top: 0.1333rem; /* 5px */
    left: 0.1333rem; /* 5px */
    background-color: #ff3a3a;
    color: #fff;
    font-size: 0.2667rem; /* 10px */
    padding: 0.0533rem 0.1333rem; /* 2px 5px */
    border-radius: 0.08rem; /* 3px */
  }
  
  .novel-name {
    font-size: 0.3733rem; /* 14px */
    color: #333;
    line-height: 1.4;
    margin-bottom: 0.08rem; /* 3px */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: center;
  }
  .novel-count {
    font-size: 0.32rem; /* 12px */
    color: #999;
  }
 .player-bar {
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 40px);
            max-width: 400px;
            background: rgba(30, 30, 50, 0.9);
            padding: 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
        }
        
        .current-song {
            display: flex;
            align-items: center;
            flex: 1;
        }
        
        .current-thumb {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            margin-right: 12px;
            animation: rotate 10s linear infinite;
        }
        
        .song-details {
            flex: 1;
        }
        
        .song-details h4 {
            font-size: 14px;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .song-details p {
            font-size: 12px;
            color: #a0a0b3;
        }
        
        .player-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .player-controls i {
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .player-controls i:hover {
            color: #0ea5e9;
        }
        
        .play-button {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #0ea5e9;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        
        .nav-bottom {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 40px);
            max-width: 400px;
            background: rgba(30, 30, 50, 0.7);
            border-radius: 15px;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            backdrop-filter: blur(10px);
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #a0a0b3;
            font-size: 12px;
            transition: color 0.3s;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        .nav-item.active {
            color: #0ea5e9;
        }
        
        .nav-item:hover {
            color: #fff;
        }
		  /* 新增样式：修复图标显示问题 */
		        .icon-fixed {
		            display: inline-block;
		            width: 24px;
		            text-align: center;
		        }
		        
		        /* 修复Font Awesome图标加载问题 */
		        .fa, .fas, .far, .fal, .fab {
		            font-family: 'Font Awesome 6 Free';
		            font-weight: 900;
		        }
		        
		        /* 确保图标正确显示 */
		        .icon-load-check:before {
		            content: "\f001";
		            font-family: 'Font Awesome 6 Free';
		            font-weight: 900;
		            color: #0ea5e9;
		            margin-right: 10px;
		        }
  </style>